<template>
    <div class="chat-page">
        <div class="header">
            <button class="home-button" @click="goHome">首页</button>
        </div>
        <div class="chat-container">
            <div v-for="(item, k) in messages" :key="k" class="message"
                :class="{ 'user-message-container': item.type === 'user', 'ai-message-container': item.type === 'ai' }">
                <div class="avatar">
                    <img :src="item.type === 'user' ? 'https://ts1.cn.mm.bing.net/th/id/R-C.9177949efd7741bfe6650e8d5c7bb2f3?rik=mOFK%2fMAjt4n6uA&riu=http%3a%2f%2fpic.616pic.com%2fys_img%2f00%2f22%2f43%2fYlkhjlpaTB.jpg&ehk=p9PWBjEO23RO%2bdW3Ug%2fic4hEST7TcSKG%2fiVVAK0dbAA%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1' : 'https://tse2-mm.cn.bing.net/th/id/OIP-C.KrNid48rz4t_-Ed_r5VY_gHaHa?rs=1&pid=ImgDetMain'"
                        :alt="item.type === 'user' ? 'User Avatar' : 'AI Avatar'" />
                </div>
                <div :class="item.type === 'user' ? 'user-message' : 'ai-message'">
                    <span>{{ item.text }}</span>
                </div>
            </div>
        </div>
        

        <div class="input-container">
            <input type="text" name="qs" id="qs" placeholder="请输入您的问题" v-model="inputValue" @keyup.enter="handleSubmit"
                :disabled="isAiAnswering" />
            <button @click="handleSubmit" class="send-button" :disabled="isAiAnswering">
                <span v-if="isAiAnswering">■</span>
                <span v-else>➤</span>
            </button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

interface Message {
    type: 'user' | 'ai'
    text: string
}

const messages = ref < Message[] > ([])
const isAiAnswering = ref(false)
const inputValue = ref('')
let eventSource: EventSource | null = null

const handleSubmit = () => {
    if (isAiAnswering.value || !inputValue.value.trim()) return

    messages.value.push({ type: 'user', text: inputValue.value })
    messages.value.push({ type: 'ai', text: '' })
    isAiAnswering.value = true

    eventSource = new EventSource(`http://127.0.0.1:8000/chat/ask/?qs=${inputValue.value}`)

    eventSource.onmessage = (event) => {
        messages.value[messages.value.length - 1].text += event.data
    }

    eventSource.onerror = () => {
        stopResponse()
    }

    inputValue.value = ''
}

const stopResponse = () => {
    if (eventSource) {
        eventSource.close()
        eventSource = null
    }
    isAiAnswering.value = false
}

const goHome = () => {
    localStorage.removeItem('userInputData')

    window.location.href = '/'

}

onMounted(() => {
    const storedData = localStorage.getItem('userInputData')
    console.log(storedData)
    if (storedData) {
        const parsedData = JSON.parse(storedData)
        inputValue.value = parsedData.text
        
    }
})
</script>

<style scoped>
.chat-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 600px;
    margin: 0 auto;
    height: 100vh;
}

.header {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 10px;
    background-color: #f5f5f5;
    border-bottom: 1px solid #ddd;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.home-button {
    background-color: #42b983;
    color: #fff;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
}

.chat-container {
    flex: 1;
    width: 100%;
    padding: 10px;
    overflow-y: auto;
    background-color: #f9f9f9;
    margin-bottom: 70px;
}

.message {
    display: flex;
    margin-bottom: 20px;
    align-items: flex-start;
}

.user-message-container {
    flex-direction: row-reverse;
}

.avatar {
    width: 40px;
    height: 40px;
    margin: 0 10px;
    border-radius: 50%;
    overflow: hidden;
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-message,
.ai-message {
    padding: 10px 15px;
    border-radius: 12px;
    max-width: 70%;
}

.user-message {
    background-color: #42b983;
    color: white;
}

.ai-message {
    background-color: #f1f1f1;
    color: black;
}

.input-container {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 600px;
    background-color: #fff;
    padding: 10px;
    border-top: 1px solid #ddd;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
}

input {
    flex: 1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-right: 10px;
}

.send-button {
    background-color: #42b983;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.send-button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}
</style>